import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Router } from '@angular/router';
/**
 * MusicCard 歌单卡片组件
 * @example
 * 父传子：父组件 MusicCommentList变量 ，绑定到子组件 comment变量 上
 * 子传符：子组件向父组件传递 delete edit restore 事件方法
 *  <ng-container *ngFor="let comment of MusicCommentList">
    <app-commentitem
     [comment]="comment"
     (delete)="deleteMusicComment($event)"
     (edit)="editMusicComment($event)"
     (restore)="deleteMusicComment($event,true)"
     > 
     </app-commentitem>
</ng-container>
 */
@Component({
  selector: 'app-commentitem',
  templateUrl: './commentitem.component.html',
  styleUrls: ['./commentitem.component.scss']
})
export class CommentitemComponent {
  @Input("comment")
   /**
   * 从父组件传入的数据值
   * @type  any[]
   * @example
   * <app-commentitem 
          [comment]="comment"
     </app-commentitem>
   */
  comment:any = {}
  /**
   * 子组件向父组件传递事件 edit  delete  restore
   */
  @Output("edit")
  _edit:EventEmitter<any> = new EventEmitter()

  @Output("delete")
  _delete:EventEmitter<any> = new EventEmitter()

  @Output("restore")
  _restore:EventEmitter<any> = new EventEmitter()

  constructor(private router:Router){}
  // 删除
  /**
   * 根据 comment 进行删除
   */
  delete(){
    this._delete.emit(this.comment)
  }
  /**
     * 根据 item.objectId 跳转到对应的编辑页面
     */
  // 编辑
  edit(){
    this.router.navigate(["/music/comment/edit"],{
      queryParams:{
        id:this.comment.objectId
      }
    })
  }
   /**
   * 根据 item 进行撤回
   */
  // 撤回
  restore(){
    this._restore.emit(this.comment)
  }
}
